<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>模型配置 - 转炉终点预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/unified.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/sidebar-theme.css">
    <link rel="stylesheet" href="styles/model-pages.css">
    <link rel="stylesheet" href="styles/scale-fix.css">
    <link rel="stylesheet" href="styles/modal-dialog.css">
    <style>
        /* 页面特定样式 */
        .config-section {
            margin-bottom: 30px;
        }
        
        .config-card {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--card-shadow);
            margin-bottom: 20px;
        }
        
        .config-card h3 {
            margin-bottom: 15px;
            font-size: 18px;
            color: var(--text-primary);
            font-weight: 500;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .form-group input[type="text"],
        .form-group input[type="number"],
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            background-color: var(--input-bg);
            color: var(--text-primary);
            font-size: 14px;
        }
        
        .form-group input[type="text"]:focus,
        .form-group input[type="number"]:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
        }
        
        .form-group textarea {
            min-height: 100px;
            resize: vertical;
        }
        
        .form-group .help-text {
            display: block;
            margin-top: 5px;
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .parameter-list {
            margin-bottom: 20px;
        }
        
        .parameter-item {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .parameter-item:last-child {
            border-bottom: none;
        }
        
        .parameter-name {
            flex: 1;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .parameter-value {
            flex: 1;
            text-align: right;
            color: var(--primary);
            font-weight: 500;
        }
        
        .parameter-actions {
            margin-left: 15px;
            display: flex;
            gap: 10px;
        }
        
        .parameter-actions button {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--text-secondary);
            font-size: 16px;
            transition: color 0.2s;
        }
        
        .parameter-actions button:hover {
            color: var(--primary);
        }
        
        .add-parameter {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: rgba(0, 123, 255, 0.05);
            border-radius: var(--border-radius);
            cursor: pointer;
            margin-top: 10px;
            transition: background-color 0.2s;
        }
        
        .add-parameter:hover {
            background-color: rgba(0, 123, 255, 0.1);
        }
        
        .add-parameter i {
            margin-right: 8px;
            color: var(--primary);
        }
        
        .add-parameter span {
            color: var(--primary);
            font-weight: 500;
        }
        
        .config-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        
        .feature-section {
            margin-top: 30px;
        }
        
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .feature-card {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 15px;
            box-shadow: var(--card-shadow);
            display: flex;
            flex-direction: column;
        }
        
        .feature-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .feature-name {
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .feature-toggle {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 20px;
        }
        
        .feature-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 20px;
        }
        
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .toggle-slider {
            background-color: var(--primary);
        }
        
        input:checked + .toggle-slider:before {
            transform: translateX(20px);
        }
        
        .feature-description {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 10px;
            flex: 1;
        }
        
        .feature-meta {
            display: flex;
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .feature-type {
            margin-right: 10px;
        }
        
        .feature-importance {
            display: flex;
            align-items: center;
        }
        
        .importance-indicator {
            display: flex;
            margin-left: 5px;
        }
        
        .importance-indicator span {
            width: 5px;
            height: 10px;
            background-color: var(--primary);
            margin-right: 2px;
            border-radius: 1px;
            opacity: 0.3;
        }
        
        .importance-indicator span.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <div class="sidebar-logo">
                <i class="fas fa-industry"></i>
            </div>
            <div class="sidebar-title">转炉终点预测系统</div>
        </div>
        <div class="sidebar-menu">
            <div class="sidebar-menu-title">主导航</div>
            <ul>
                <li><a href="index.html"><i class="fas fa-home"></i>首页</a></li>
                
                <li><a href="production-monitor.html"><i class="fas fa-chart-line"></i>生产监控</a></li>
                <li><a href="history-data.html"><i class="fas fa-history"></i>历史数据</a></li>
                <li><a href="quality-analysis.html"><i class="fas fa-flask"></i>质量分析</a></li>
            </ul>
            
            <div class="sidebar-menu-title">模型管理</div>
            <ul>
                <li><a href="model-details.html"><i class="fas fa-brain"></i>模型详情</a></li>
                <li><a href="model-config.html" class="active"><i class="fas fa-cogs"></i>模型配置</a></li>
                <li><a href="model-performance.html"><i class="fas fa-chart-bar"></i>模型性能</a></li>
                <li><a href="model-update.html"><i class="fas fa-sync-alt"></i>模型更新</a></li>
            </ul>
            
            <div class="sidebar-menu-title">系统设置</div>
            <ul>
                <li><a href="system-settings.html"><i class="fas fa-cog"></i>系统设置</a></li>
                <li><a href="online-analysis.html"><i class="fas fa-chart-bar"></i>在线分析</a></li>
            </ul>
        </div>
        <div class="sidebar-footer">
            <i class="fas fa-info-circle"></i>
            <span>系统版本：v2.5.3</span>
        </div>
    </div>

    <!-- 侧边栏遮罩层 -->
    <div class="sidebar-overlay"></div>

    <div class="container">
        <div class="header">
            <div class="header-left">
                <div>
                    <div class="title">模型配置</div>
                    <div class="subtitle">调整模型参数与运行环境设置</div>
                </div>
            </div>
            <div class="header-right">
                <div class="header-icon">
                    <i class="fas fa-search"></i>
                </div>
                <div class="header-icon">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </div>
                <div class="dropdown">
                    <div class="user-dropdown dropdown-trigger">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" class="user-avatar">
                        <span class="user-name">工程师</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-user"></i>
                            <span>个人资料</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-cog"></i>
                            <span>账号设置</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-question-circle"></i>
                            <span>帮助中心</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-sign-out-alt"></i>
                            <span>退出登录</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-wrapper">
            <!-- 参数配置部分 -->
            <div class="section-title">核心参数配置</div>
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-sliders-h"></i>
                        模型运行参数
                    </div>
                    <div class="header-actions">
                        <button class="btn btn-sm btn-primary" id="saveConfigBtn">
                            <i class="fas fa-save"></i>
                            保存配置
                        </button>
                        <button class="btn btn-sm btn-secondary" id="resetConfigBtn">
                            <i class="fas fa-undo"></i>
                            恢复默认
                        </button>
                    </div>
                </div>
                <div class="card-content">
                    <div class="config-form">
                        <div class="config-group">
                            <div class="config-group-title">基础设置</div>
                            <div class="config-item">
                                <div class="config-label">推理时间限制</div>
                                <div class="config-input">
                                    <input type="number" value="500" class="form-control">
                                    <span class="config-unit">ms</span>
                                </div>
                                <div class="config-desc">模型推理的最大时间限制，超时将使用上一次结果</div>
                            </div>
                            <div class="config-item">
                                <div class="config-label">批处理大小</div>
                                <div class="config-input">
                                    <input type="number" value="16" class="form-control">
                                </div>
                                <div class="config-desc">每批次处理样本数量，影响内存占用与推理速度</div>
                            </div>
                            <div class="config-item">
                                <div class="config-label">推理线程数</div>
                                <div class="config-input">
                                    <input type="number" value="4" class="form-control">
                                </div>
                                <div class="config-desc">并行推理线程数量，根据服务器核心数调整</div>
                            </div>
                        </div>
                        
                        <div class="config-group">
                            <div class="config-group-title">优化设置</div>
                            <div class="config-item">
                                <div class="config-label">预测结果平滑</div>
                                <div class="config-input">
                                    <select class="form-control">
                                        <option>开启</option>
                                        <option>关闭</option>
                                    </select>
                                </div>
                                <div class="config-desc">使用移动平均平滑预测结果波动</div>
                            </div>
                            <div class="config-item">
                                <div class="config-label">平滑窗口大小</div>
                                <div class="config-input">
                                    <input type="number" value="5" class="form-control">
                                </div>
                                <div class="config-desc">平滑计算时考虑的历史数据点数量</div>
                            </div>
                            <div class="config-item">
                                <div class="config-label">异常值过滤</div>
                                <div class="config-input">
                                    <select class="form-control">
                                        <option>开启</option>
                                        <option>关闭</option>
                                    </select>
                                </div>
                                <div class="config-desc">过滤异常输入数据，避免模型预测偏差</div>
                            </div>
                        </div>
                        
                        <div class="config-group">
                            <div class="config-group-title">预测偏差校正</div>
                            <div class="config-item">
                                <div class="config-label">温度偏差校正</div>
                                <div class="config-input">
                                    <input type="number" value="-2.5" class="form-control">
                                    <span class="config-unit">°C</span>
                                </div>
                                <div class="config-desc">温度预测结果的偏差校正值</div>
                            </div>
                            <div class="config-item">
                                <div class="config-label">碳含量偏差校正</div>
                                <div class="config-input">
                                    <input type="number" value="0.0015" class="form-control">
                                    <span class="config-unit">%</span>
                                </div>
                                <div class="config-desc">碳含量预测结果的偏差校正值</div>
                            </div>
                            <div class="config-item">
                                <div class="config-label">校正启用条件</div>
                                <div class="config-input">
                                    <select class="form-control">
                                        <option>全部炉次</option>
                                        <option>仅特定钢种</option>
                                        <option>仅异常检测</option>
                                    </select>
                                </div>
                                <div class="config-desc">控制何时应用校正参数</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 运行环境配置 -->
            <div class="section-title">运行环境配置</div>
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-server"></i>
                        硬件加速与资源分配
                    </div>
                    <div class="header-actions">
                        <button class="btn btn-sm btn-primary" id="applyChangesBtn">
                            <i class="fas fa-check"></i>
                            应用更改
                        </button>
                    </div>
                </div>
                <div class="card-content">
                    <div class="config-form">
                        <div class="config-item">
                            <div class="config-label">计算设备</div>
                            <div class="config-input">
                                <select class="form-control">
                                    <option>GPU</option>
                                    <option>CPU</option>
                                    <option>自动选择</option>
                                </select>
                            </div>
                            <div class="config-desc">选择模型运行的硬件设备</div>
                        </div>
                        <div class="config-item">
                            <div class="config-label">GPU内存限制</div>
                            <div class="config-input">
                                <input type="number" value="2048" class="form-control">
                                <span class="config-unit">MB</span>
                            </div>
                            <div class="config-desc">模型运行时可使用的最大GPU内存</div>
                        </div>
                        <div class="config-item">
                            <div class="config-label">混合精度计算</div>
                            <div class="config-input">
                                <div class="toggle-switch">
                                    <input type="checkbox" id="mixedPrecision" checked>
                                    <label for="mixedPrecision"></label>
                                </div>
                            </div>
                            <div class="config-desc">使用FP16混合精度加速计算，降低内存占用</div>
                        </div>
                        <div class="config-item">
                            <div class="config-label">内存优化</div>
                            <div class="config-input">
                                <div class="toggle-switch">
                                    <input type="checkbox" id="memoryOptimization" checked>
                                    <label for="memoryOptimization"></label>
                                </div>
                            </div>
                            <div class="config-desc">启用内存优化，减少峰值内存使用</div>
                        </div>
                        <div class="config-item">
                            <div class="config-label">模型缓存</div>
                            <div class="config-input">
                                <div class="toggle-switch">
                                    <input type="checkbox" id="modelCache" checked>
                                    <label for="modelCache"></label>
                                </div>
                            </div>
                            <div class="config-desc">将编译后的模型缓存到磁盘，加速下次加载</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 数据源配置 -->
            <div class="section-title">数据源配置</div>
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-database"></i>
                        输入数据配置
                    </div>
                    <div class="header-actions">
                        <button class="btn btn-sm btn-secondary" id="testConnectionBtn">
                            <i class="fas fa-sync"></i>
                            测试连接
                        </button>
                    </div>
                </div>
                <div class="card-content">
                    <div class="config-form">
                        <div class="config-item">
                            <div class="config-label">主数据源</div>
                            <div class="config-input">
                                <select class="form-control">
                                    <option>实时数据库</option>
                                    <option>历史数据库</option>
                                    <option>模拟数据</option>
                                </select>
                            </div>
                            <div class="config-desc">选择模型输入数据的主要来源</div>
                        </div>
                        <div class="config-item">
                            <div class="config-label">数据采样率</div>
                            <div class="config-input">
                                <input type="number" value="100" class="form-control">
                                <span class="config-unit">ms</span>
                            </div>
                            <div class="config-desc">数据采集的时间间隔</div>
                        </div>
                        <div class="config-item">
                            <div class="config-label">数据缓存时长</div>
                            <div class="config-input">
                                <input type="number" value="30" class="form-control">
                                <span class="config-unit">min</span>
                            </div>
                            <div class="config-desc">输入数据在内存中的缓存时间</div>
                        </div>
                        <div class="config-item">
                            <div class="config-label">备用数据源</div>
                            <div class="config-input">
                                <select class="form-control">
                                    <option>本地缓存</option>
                                    <option>备份服务器</option>
                                    <option>无</option>
                                </select>
                            </div>
                            <div class="config-desc">主数据源不可用时的备选来源</div>
                        </div>
                        <div class="config-item">
                            <div class="config-label">自动故障转移</div>
                            <div class="config-input">
                                <div class="toggle-switch">
                                    <input type="checkbox" id="autoFailover" checked>
                                    <label for="autoFailover"></label>
                                </div>
                            </div>
                            <div class="config-desc">主数据源故障时自动切换到备用数据源</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript引用 -->
    <script src="scripts/unified.js"></script>
    <script src="scripts/modal-dialog.js"></script>
    <script src="scripts/add-modal-to-pages.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 参数项点击事件
            const parameterItems = document.querySelectorAll('.parameter-item');
            
            parameterItems.forEach(item => {
                const editBtn = item.querySelector('.edit-btn');
                const paramName = item.querySelector('.parameter-name').textContent;
                const paramValue = item.querySelector('.parameter-value').textContent;
                
                if (editBtn) {
                    editBtn.addEventListener('click', function(e) {
                        e.stopPropagation(); // 防止触发item的点击事件
                        
                        // 根据参数类型显示不同的编辑表单
                        let inputType = 'text';
                        let min = '';
                        let max = '';
                        let step = '';
                        
                        if (paramValue.includes('°C') || paramValue.includes('%') || 
                            !isNaN(parseFloat(paramValue))) {
                            inputType = 'number';
                            
                            // 根据参数名设置不同的取值范围
                            if (paramName.includes('温度')) {
                                min = '1500';
                                max = '1700';
                                step = '1';
                            } else if (paramName.includes('含量') || paramName.includes('率')) {
                                min = '0';
                                max = '100';
                                step = '0.01';
                            } else if (paramName.includes('批量')) {
                                min = '1';
                                max = '1000';
                                step = '1';
                            }
                        }
                        
                        // 提取纯数字值
                        let numericValue = paramValue.replace(/[^\d.-]/g, '');
                        
                        showFormDialog(`编辑参数: ${paramName}`, `
                            <div class="edit-parameter-form">
                                <div class="form-group">
                                    <label for="param-value">参数值</label>
                                    <input type="${inputType}" id="param-value" name="param_value" 
                                        value="${numericValue}" class="form-control"
                                        ${min ? 'min="' + min + '"' : ''}
                                        ${max ? 'max="' + max + '"' : ''}
                                        ${step ? 'step="' + step + '"' : ''}>
                                    <span class="help-text">${getParameterHelp(paramName)}</span>
                                </div>
                                
                                <div class="form-group">
                                    <label for="param-description">描述（可选）</label>
                                    <textarea id="param-description" name="param_description" class="form-control"
                                        placeholder="添加对此参数的描述...">${getParameterDesc(paramName)}</textarea>
                                </div>
                            </div>
                        `, function(data) {
                            // 更新参数值
                            let newValue = data.param_value;
                            
                            // 添加单位
                            if (paramValue.includes('°C')) {
                                newValue += '°C';
                            } else if (paramValue.includes('%')) {
                                newValue += '%';
                            }
                            
                            item.querySelector('.parameter-value').textContent = newValue;
                            showMessage(`参数 "${paramName}" 已更新`, 'success');
                        });
                    });
                }
                
                // 整行点击显示详情
                item.addEventListener('click', function() {
                    if (event.target.closest('.parameter-actions')) return; // 如果点击的是按钮区域，不触发
                    
                    showDetailDialog(`参数详情: ${paramName}`, `
                        <div class="parameter-detail">
                            <div class="param-header">
                                <div class="param-main">
                                    <h3>${paramName}</h3>
                                    <div class="param-value">${paramValue}</div>
                                </div>
                                <div class="param-category">${getParameterCategory(paramName)}</div>
                            </div>
                            
                            <div class="param-description">
                                <p>${getParameterFullDesc(paramName)}</p>
                            </div>
                            
                            <div class="param-history">
                                <h4>历史变更</h4>
                                <div class="history-list">
                                    ${getParameterHistory(paramName)}
                                </div>
                            </div>
                            
                            <div class="param-impact">
                                <h4>影响分析</h4>
                                <p>${getParameterImpact(paramName)}</p>
                                
                                <div class="impact-chart">
                                    <img src="images/${paramName.toLowerCase().replace(/\s+/g, '_')}_impact.svg" 
                                         alt="${paramName} 影响分析" 
                                         onerror="this.src='images/placeholder_impact.svg'">
                                </div>
                            </div>
                            
                            <div class="param-recommendation">
                                <h4>推荐配置</h4>
                                <p>${getParameterRecommendation(paramName)}</p>
                            </div>
                        </div>
                        <style>
                            .parameter-detail {
                                display: flex;
                                flex-direction: column;
                                gap: 20px;
                            }
                            .param-header {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                padding-bottom: 15px;
                                border-bottom: 1px solid #eee;
                            }
                            .param-main h3 {
                                font-size: 20px;
                                font-weight: 600;
                                color: var(--primary-dark);
                                margin: 0 0 5px 0;
                            }
                            .param-value {
                                font-size: 24px;
                                font-weight: 700;
                                color: var(--primary);
                            }
                            .param-category {
                                background-color: var(--primary-light);
                                color: var(--primary-dark);
                                padding: 5px 10px;
                                border-radius: 15px;
                                font-size: 12px;
                                font-weight: 500;
                            }
                            .param-description p {
                                margin: 0;
                                line-height: 1.6;
                                color: #555;
                            }
                            .param-history h4, .param-impact h4, .param-recommendation h4 {
                                margin: 0 0 10px 0;
                                font-size: 16px;
                                font-weight: 500;
                                color: var(--primary-dark);
                            }
                            .history-list {
                                background-color: #f8f9fa;
                                border-radius: 8px;
                                padding: 10px;
                            }
                            .history-item {
                                display: flex;
                                justify-content: space-between;
                                padding: 8px 0;
                                border-bottom: 1px solid #eee;
                            }
                            .history-item:last-child {
                                border-bottom: none;
                            }
                            .history-date {
                                color: #666;
                                font-size: 13px;
                            }
                            .history-change {
                                font-weight: 500;
                            }
                            .impact-chart {
                                background-color: #f8f9fa;
                                padding: 15px;
                                border-radius: 8px;
                                text-align: center;
                                height: 200px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                margin-top: 15px;
                            }
                            .impact-chart img {
                                max-width: 100%;
                                max-height: 100%;
                            }
                            .param-impact p, .param-recommendation p {
                                margin: 0 0 10px 0;
                                line-height: 1.6;
                                color: #555;
                            }
                        </style>
                    `, 'large');
                });
            });
            
            // 添加参数按钮点击事件
            const addParamBtns = document.querySelectorAll('.add-parameter');
            
            addParamBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const section = this.closest('.config-section');
                    const sectionTitle = section.querySelector('h3').textContent;
                    
                    showFormDialog(`添加新参数到 ${sectionTitle}`, `
                        <div class="add-parameter-form">
                            <div class="form-group">
                                <label for="param-name">参数名称</label>
                                <input type="text" id="param-name" name="param_name" class="form-control"
                                    placeholder="输入参数名称...">
                            </div>
                            
                            <div class="form-group">
                                <label for="param-value">参数值</label>
                                <input type="text" id="param-value" name="param_value" class="form-control"
                                    placeholder="输入参数值...">
                            </div>
                            
                            <div class="form-group">
                                <label for="param-type">参数类型</label>
                                <select id="param-type" name="param_type" class="form-control">
                                    <option value="number">数值型</option>
                                    <option value="text">文本型</option>
                                    <option value="boolean">布尔型</option>
                                    <option value="array">数组型</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="param-description">描述（可选）</label>
                                <textarea id="param-description" name="param_description" class="form-control"
                                    placeholder="添加对此参数的描述..."></textarea>
                            </div>
                        </div>
                    `, function(data) {
                        // 创建新参数项
                        const parameterList = section.querySelector('.parameter-list');
                        const newItem = document.createElement('div');
                        newItem.className = 'parameter-item';
                        newItem.innerHTML = `
                            <span class="parameter-name">${data.param_name}</span>
                            <span class="parameter-value">${data.param_value}</span>
                            <div class="parameter-actions">
                                <button class="edit-btn" title="编辑参数">
                                    <i class="icon icon-edit">✎</i>
                                </button>
                                <button class="delete-btn" title="删除参数">
                                    <i class="icon icon-delete">×</i>
                                </button>
                            </div>
                        `;
                        
                        parameterList.appendChild(newItem);
                        
                        // 为新添加的按钮绑定事件
                        const editBtn = newItem.querySelector('.edit-btn');
                        const deleteBtn = newItem.querySelector('.delete-btn');
                        
                        editBtn.addEventListener('click', function(e) {
                            e.stopPropagation();
                            // 编辑功能
                        });
                        
                        deleteBtn.addEventListener('click', function(e) {
                            e.stopPropagation();
                            newItem.remove();
                            showMessage(`参数 "${data.param_name}" 已删除`, 'success');
                        });
                        
                        showMessage(`参数 "${data.param_name}" 已添加`, 'success');
                    });
                });
            });
            
            // 特性卡片的开关按钮
            const featureToggles = document.querySelectorAll('.feature-toggle input');
            
            featureToggles.forEach(toggle => {
                toggle.addEventListener('change', function() {
                    const featureCard = this.closest('.feature-card');
                    const featureName = featureCard.querySelector('.feature-name').textContent;
                    
                    if (this.checked) {
                        showMessage(`特性 "${featureName}" 已启用`, 'success');
                    } else {
                        showMessage(`特性 "${featureName}" 已禁用`, 'info');
                    }
                });
            });
            
            // 保存配置按钮
            const saveConfigBtn = document.querySelector('#save-config');
            
            if (saveConfigBtn) {
                saveConfigBtn.addEventListener('click', function() {
                    showConfirmDialog('保存配置', '确定要保存当前配置吗？这将影响模型的运行行为。', function() {
                        // 模拟保存过程
                        showMessage('正在保存配置...', 'info');
                        
                        setTimeout(() => {
                            showMessage('配置已成功保存', 'success');
                        }, 1500);
                    });
                });
            }
            
            // 重置配置按钮
            const resetConfigBtn = document.querySelector('#reset-config');
            
            if (resetConfigBtn) {
                resetConfigBtn.addEventListener('click', function() {
                    showConfirmDialog('重置配置', '确定要重置所有配置到默认值吗？这将丢失所有自定义设置。', function() {
                        // 模拟重置过程
                        showMessage('正在重置配置...', 'info');
                        
                        setTimeout(() => {
                            showMessage('配置已重置为默认值', 'success');
                        }, 1500);
                    });
                });
            }
            
            // 辅助函数：获取参数帮助信息
            function getParameterHelp(paramName) {
                const helpTexts = {
                    '学习率': '建议范围: 0.001 - 0.1',
                    '批量大小': '建议范围: 32 - 512',
                    '隐藏层数量': '建议范围: 2 - 10',
                    '训练轮次': '建议范围: 50 - 500',
                    '温度阈值': '建议范围: 1580 - 1640 °C',
                    '碳含量阈值': '建议范围: 0.03 - 0.07 %',
                    '特征维度': '建议范围: 10 - 100',
                    '时序长度': '建议范围: 20 - 200'
                };
                
                return helpTexts[paramName] || '请根据实际情况调整参数值';
            }
            
            // 辅助函数：获取参数描述
            function getParameterDesc(paramName) {
                const descriptions = {
                    '学习率': '模型训练时的参数更新步长',
                    '批量大小': '每次参数更新使用的样本数量',
                    '隐藏层数量': 'LSTM网络的隐藏层数',
                    '训练轮次': '完整数据集的训练遍历次数',
                    '温度阈值': '预测警告的温度下限值',
                    '碳含量阈值': '预测警告的碳含量上限值',
                    '特征维度': '特征向量的维度',
                    '时序长度': '时序数据的采样长度'
                };
                
                return descriptions[paramName] || '';
            }
            
            // 辅助函数：获取参数分类
            function getParameterCategory(paramName) {
                if (paramName.includes('率') || paramName.includes('轮次') || 
                    paramName.includes('批量') || paramName.includes('层数')) {
                    return '训练参数';
                } else if (paramName.includes('温度') || paramName.includes('碳含量') || 
                          paramName.includes('阈值')) {
                    return '预测阈值';
                } else if (paramName.includes('维度') || paramName.includes('长度')) {
                    return '模型结构';
                } else {
                    return '其他参数';
                }
            }
            
            // 辅助函数：获取参数完整描述
            function getParameterFullDesc(paramName) {
                const descriptions = {
                    '学习率': '学习率控制模型训练过程中权重更新的步长大小。较大的学习率可能导致训练不稳定，而较小的学习率可能导致训练速度过慢。当前值0.005是基于实验结果选择的平衡点，能够保证模型稳定收敛且训练效率较高。',
                    '批量大小': '批量大小决定了每次梯度更新使用的样本数量。较大的批量可以提高训练速度和稳定性，但会增加内存消耗。当前值128是在系统资源限制下的最优选择，能够充分利用GPU加速。',
                    '隐藏层数量': '隐藏层数量决定了LSTM网络的深度。层数越多，模型表达能力越强，但也更容易过拟合且训练难度增加。当前配置的4层是经过多次实验验证的最佳选择，能够捕捉转炉冶炼过程中的复杂时序特征。',
                    '训练轮次': '训练轮次表示模型在整个训练数据集上迭代的次数。轮次过少可能导致模型欠拟合，轮次过多可能导致过拟合。当前设置为200轮是基于学习曲线分析得出的最佳值，此时验证损失稳定且不再明显下降。',
                    '温度阈值': '温度阈值用于判断预测结果是否需要触发警告。当预测温度低于此阈值时，系统会提示操作人员注意终点温度可能偏低。当前值1600°C是基于工艺要求和历史数据统计分析确定的。',
                    '碳含量阈值': '碳含量阈值用于判断预测结果是否需要触发警告。当预测碳含量高于此阈值时，系统会提示可能需要延长吹炼时间。当前值0.05%是基于产品质量标准和历史数据统计分析确定的。',
                    '特征维度': '特征维度指LSTM网络输出的特征向量维度。维度越高，表达能力越强，但计算量也越大。当前值64是在模型性能和计算效率之间的平衡点。',
                    '时序长度': '时序长度指模型考虑的历史数据点数量。长度越长，可以捕捉更长期的时序依赖，但会增加计算复杂度。当前值120对应实际生产中约10分钟的数据，足以覆盖关键工艺阶段变化。'
                };
                
                return descriptions[paramName] || '该参数用于控制模型的行为和性能，请根据实际需求谨慎调整。不当的参数设置可能导致模型性能下降或预测结果不准确。';
            }
            
            // 辅助函数：获取参数历史
            function getParameterHistory(paramName) {
                // 生成随机历史记录
                const dates = ['2023-10-15', '2023-09-20', '2023-08-05', '2023-07-12'];
                const values = [];
                
                // 根据参数类型生成不同的历史值
                if (paramName.includes('率')) {
                    values.push('0.005', '0.01', '0.003', '0.007');
                } else if (paramName.includes('批量')) {
                    values.push('128', '64', '256', '96');
                } else if (paramName.includes('层数')) {
                    values.push('4', '3', '5', '2');
                } else if (paramName.includes('轮次')) {
                    values.push('200', '150', '300', '100');
                } else if (paramName.includes('温度')) {
                    values.push('1600°C', '1590°C', '1610°C', '1580°C');
                } else if (paramName.includes('碳含量')) {
                    values.push('0.05%', '0.04%', '0.06%', '0.03%');
                } else if (paramName.includes('维度')) {
                    values.push('64', '32', '128', '48');
                } else if (paramName.includes('长度')) {
                    values.push('120', '100', '150', '80');
                } else {
                    values.push('值1', '值2', '值3', '值4');
                }
                
                let historyHTML = '';
                for (let i = 0; i < dates.length; i++) {
                    historyHTML += `
                        <div class="history-item">
                            <span class="history-date">${dates[i]}</span>
                            <span class="history-change">${values[i]}</span>
                        </div>
                    `;
                }
                
                return historyHTML;
            }
            
            // 辅助函数：获取参数影响分析
            function getParameterImpact(paramName) {
                const impacts = {
                    '学习率': '学习率对模型训练有显著影响。经过实验分析，当学习率从0.001增加到0.005时，模型收敛速度提高了约60%，同时保持了验证精度。若继续增加到0.01，虽然训练速度更快，但会导致预测温度MAE增加约2.1°C，预测碳含量MAE增加约0.003%。',
                    '批量大小': '批量大小主要影响训练稳定性和速度。在测试中，将批量从64增加到128，可以减少约35%的训练时间，且梯度更新更加稳定。若继续增加到256，虽然训练速度继续提升，但边际效益递减，且需要更多GPU内存。',
                    '隐藏层数量': '隐藏层数量直接决定了模型的复杂度。通过消融研究发现，从2层增加到4层，模型在验证集上的性能提升了约12%，特别是对复杂工况的适应能力。增加到6层后，性能提升不明显，但训练时间增加约50%，且有过拟合风险。',
                    '训练轮次': '训练轮次关系到模型的拟合程度。从100轮增加到200轮，模型在测试集上的预测准确率提高了约5个百分点。超过200轮后，验证损失不再明显下降，继续训练存在过拟合风险。',
                    '温度阈值': '温度阈值影响警报的敏感度。当前设置的1600°C能够捕捉约95%的温度偏低事件，同时保持较低的误报率（约8%）。若降低到1590°C，可以提高检出率到98%，但误报率会增加到约20%。',
                    '碳含量阈值': '碳含量阈值直接影响产品质量控制。设置为0.05%时，可以确保约97%的产品满足质量标准，同时保持生产效率。若降低到0.04%，虽然产品合格率可以提高到近100%，但会增加约15%的过吹风险。',
                    '特征维度': '特征维度影响模型的表达能力。从32维增加到64维，模型对时序模式的捕捉能力提高了约9%，特别是对短期波动的敏感度。继续增加到128维，性能提升不明显（仅约2%），但模型参数量增加一倍。',
                    '时序长度': '时序长度决定了模型能够利用的历史信息。当前设置的120个时间点（约10分钟数据）能够覆盖大多数转炉冶炼关键阶段。测试表明，减少到60个点会导致预测精度下降约7%，而增加到180个点仅带来约1.5%的性能提升。'
                };
                
                return impacts[paramName] || '该参数的调整会影响模型的行为和性能。请根据实际生产需求进行调整，并在调整后监控模型性能变化。';
            }
            
            // 辅助函数：获取参数推荐
            function getParameterRecommendation(paramName) {
                const recommendations = {
                    '学习率': '根据当前生产环境和数据特性，建议将学习率保持在0.003-0.007范围内。若数据更新频率提高，可适当增加学习率；若模型训练不稳定，可降低学习率。',
                    '批量大小': '推荐使用64-128的批量大小。对于新增的GPU服务器，可以考虑增加到256以提高训练效率；对于数据量较小的特殊炉次训练，可以减小到32以提高拟合精度。',
                    '隐藏层数量': '对于标准预测任务，4层LSTM结构是比较平衡的选择。如需提高模型对特殊工况的适应能力，可以考虑增加到5-6层，但需要相应增加正则化强度防止过拟合。',
                    '训练轮次': '建议根据验证曲线动态确定训练轮次，通常在150-250之间。可以启用早停机制，当验证损失连续10轮无改善时自动停止训练。',
                    '温度阈值': '温度阈值应根据当前生产的钢种要求灵活调整。对于高精度要求的特种钢，可以设置更高的阈值（如1610°C）；对于普通钢种，可以适当降低（如1590°C）以减少误报。',
                    '碳含量阈值': '碳含量阈值应严格按照产品质量标准设置。对于低碳钢种，建议设置为0.03-0.04%；对于中碳钢种，可以设置为0.05-0.07%。',
                    '特征维度': '推荐使用48-64的特征维度，这是计算效率和模型性能的良好平衡点。如系统资源充足且需要更高精度，可以尝试增加到96。',
                    '时序长度': '建议根据实际冶炼周期调整时序长度。标准转炉生产可以使用100-150的时序长度；对于特殊工艺流程，可以适当延长到180-200以捕捉更完整的过程信息。'
                };
                
                return recommendations[paramName] || '建议根据实际生产需求和系统资源情况调整该参数，调整后应进行充分测试验证，确保模型性能满足预期。';
            }
        });
    </script>
</body>
</html> 